<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>AdminLTE 3 | Data Tables</title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- DataTables -->
  <link rel="stylesheet" href="./plugins/datatables/dataTables.bootstrap4.css">

</head>
<body class="hold-transition sidebar-mini">
<div class="wrapper">
  <!-- Main content -->
  <section class="content">
    <div class="row">
      <div class="col-12">
        <div class="card">
          <div class="card-header">
            <button id="add" class="btn btn-primary btn-sm">添加位置信息</button>
          </div>
          <!-- /.card-header -->
          <div class="card-body">
            <table id="example2" class="table table-bordered table-hover">
            </table>
          </div>
          <!-- /.card-body -->
        </div>
      </div>
      <!-- /.col -->
    </div>
    <!-- /.row -->
  </section>
  <!-- /.content -->
  <footer class="main-footer text-center" style="margin-left: 0%;">
    <div class="d-none d-sm-block">
      <b>版本:</b> 1.0
    </div>
    <!-- 按钮触发模态框 -->
    <strong>Copyright &copy; 2014-2018 <a href="http://adminlte.io">咸阳恒源汽贸有限公司</a>.</strong>保留所有权.
  </footer>

  <!-- Control Sidebar -->
  <aside class="control-sidebar control-sidebar-dark">
    <!-- Control sidebar content goes here -->
  </aside>
  <!-- /.control-sidebar -->
</div>
<!-- ./wrapper -->


<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" style="max-width: 1000px;">
    <div class="modal-content">
      <div class="modal-header">

        <h4 class="modal-title" id="myModalLabel">地理位置信息</h4>
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
      </div>
      <div class="modal-body">
        <!-- form start -->
        <form role="form" action="">
          <div class="row mt-3">
            <div class="col-lg-2">
              <div class="text-center mt-2"><code>*</code>&nbsp;&nbsp;GIS&nbsp;编&nbsp;号</div>
            </div>
            <div class="col-lg-9 form-group">
              <input name="code" type="text" class="form-control" id="g_id" placeholder="g00001" disabled>
              <input name="gid" type="text" class="form-control" id="u_fid" placeholder=""
                     style="display: none">
            </div>
          </div>
          <div class="row">
            <div class="col-lg-2">
              <div class="text-center mt-2"><code>*</code>&nbsp;&nbsp;机构名称</div>
            </div>
            <div class="col-lg-9 form-group">
              <input name="name" type="text" class="form-control" id="g_name" value="西宁市城西创业园">
            </div>
          </div>
          <div class="row">
            <div class="col-lg-2">
              <div class="text-center mt-2"><code>*</code>&nbsp;&nbsp;经&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;度</div>
            </div>
            <div class="col-lg-9 form-group">
              <input name="longitude" type="text" class="form-control" id="g_longitude" value="102.336">
            </div>
          </div>
          <div class="row">
            <div class="col-lg-2">
              <div class="text-center mt-2"><code>*</code>&nbsp;&nbsp;纬&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;度</div>
            </div>
            <div class="col-lg-9 form-group">
              <input name="latitude" type="text" class="form-control" id="g_latitude" value="100.488">
            </div>
          </div>
          <div class="row">
            <div class="col-lg-2">
              <div class="text-center mt-2"><code>*</code>&nbsp;&nbsp;地&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;址</div>
            </div>
            <div class="col-lg-9 form-group">
              <input name="address" type="text" class="form-control" id="g_address" value="青海省西宁市城北区阳光大道">
            </div>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button id="save" type="button" class="btn btn-primary">保存</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal -->
</div>

<!--点击删除按钮后弹出的页面-->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" style="height: 200px">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="myModalLabel">
          提示
        </h4>
        <!--<button type="button" class="close" data-dismiss="modal" aria-hidden="true">-->
        <!--&times;-->
        <!--</button> -->
      </div>
      <div class="modal-body">
        你确定要删除该条信息吗？
        <input id="del_id" style="display: none"/>
      </div>
      <div class="modal-footer">
        <button id="delBtn" type="submit" class="btn btn-primary" value="submit" >确定</button>
        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal -->
</div>
<!-- DataTables -->
<script src="./plugins/datatables/jquery.dataTables.js"></script>
<script src="./plugins/datatables/dataTables.bootstrap4.js"></script>


<!-- page script -->
<script>
    $(function () {
        var user_table = $('#example2').DataTable({
            "language": {
                "url": "./plugins/datatables/chinese.txt"
            },
            "serverSide": true,
            "paging": true,
            "lengthChange": true,
            "searching": true,
            "ordering": true,
            "info": true,
            "autoWidth": false,
            "ajax": {
                "url": './GISList.action',
                "type": 'POST'
            },
            columns: [
                {
                    "data": null,
                    "title": "序号",
                    "sClass": "text-tables-center text-center",
                    "createdCell": function (nTd, sData, oData, iRow, iCol) {
                        var startnum = this.api().page() * (this.api().page.info().length);
                        $(nTd).html(iRow + 1 + startnum); //分页行号累加：$(nTd).html(iRow+1);
                    }
                },
                {data: 'latitude', 'title': "经度", 'sClass': "text-center"},
                {data: 'longitude', 'title': "纬度", 'sClass': "text-center"},
                {data: 'address', 'title': "地址", 'sClass': "text-center"},
                {
                    data: 'gid', 'sClass': "text-center",
                    'title': "操作",
                    render: function (data, type, row) {
                        var id = row.gid == undefined ? -1 : row.gid;//-1说明是新增，其余表示为编辑
                        return "<i class='fa fa-pencil l-fa edit-btn' style='cursor: pointer' id=\'" + id + "\'></i>&nbsp;&nbsp;<i class='fa fa-trash-o m-fa del-btn' style='cursor: pointer' id=\'" + id + "\'></i>";
                    }
                }
            ]
        });

        function userSearchBtn() {
            user_table.ajax.reload();   // 这边的user_table，是由初始化datatables的变量名
        }

        //点击编辑图标出现编辑框
        $("#example2 tbody").unbind('click').on("click", ".edit-btn", function () {
            var id = $(this).attr("id");
            if (id!=-1)
            {
                var url = encodeURI("./getUserGIS.action");
                $.ajax({
                    type: 'POST',
                    url: url,
                    data: {
                        "contentId":id
                    },
                    dataType: "json",
                    success: function (result) {
                        if (result.success) {
                            //刷新表格
                            var data = result.data;
                            $("#u_id").val("FU00"+data.gid);
                            $("#u_fid").val(data.gid);
                            $("#g_address").val(data.address);
                            $("#g_latitude").val(data.latitude);
                            $("#g_longitude").val(data.longitude);

                            var options = $("#eduction").children();
                            $.each(options, function (i, val) {
                                var jqob = $(val);
                                //把input变为字符串
                                if (jqob.val()==data.eduction) {
                                    $("#eduction").val(jqob.val()).trigger("change");
                                    jqob.attr("selected","selected");
                                }
                            });



                            $('#myModal').modal('show');
                        } else {

                        }
                    },
                    dataType: "json"
                });
            }else{
                $('#myModal').modal('show');
            }

        });

        //删除
        $("#example2 tbody").on("click", ".del-btn", function () {
            var id = $(this).attr("id");
            $("#del_id").val(id);

            $('#deleteModal').modal('show');
            $("#deleteModal").bind('hide.bs.modal', function () {
                $(".modal-backdrop").remove();
            });

            $("#deleteModal").on('hidden.bs.modal', '.modal', function () {
                $(this).removeData('bs.modal');
            });


        });


        //保存按钮
        $("#example2 tbody").on("click", ".save-btn", function () {
            var id = $(this).attr("id");
            var tds = $(this).parents("tr").children();
            var sTds = tds.length;
            var lisval = [];
            for (var i = 0; i < sTds; i++) {
                if (i < sTds - 1)
                    lisval.push(tds.eq(i).children("input").val());
                else lisval.push(tds.eq(i).children("input").val())
            }
            if (i == sTds - 1) lisval.push();
            if (lisval[1] == "") {
                toNotification("警告！", "证照属性设置不能为空！", "warning");
                return false;
            } else if (lisval[1].length > 10) {
                toNotification("警告！", "证照属性设置不能超过十个字符！", "warning");
                return false;
            } else {
                $.each(tds, function (i, val) {
                    var jqob = $(val);
                    //把input变为字符串
                    if (!jqob.has('i').length) {
                        var txt = jqob.children("input").val();
                        jqob.html(txt);
                    }
                });
                $(this).toggleClass("edit-btn fa-pencil");
                $(this).toggleClass("save-btn fa-save");
                //保存数据
                SaveData(lisval, id);
            }

        });


        //证照属性设置保存信息
        $("#save").on("click", function SaveData() {
            var data = $('form').serialize();
            //序列化获得表单数据，结果为：user_id=12&user_name=John&user_age=20
            var submitData = decodeURIComponent(data, true);
            //submitData是解码后的表单数据，结果同上
            var url = encodeURI("./saveUserGIS.action");
            $.ajax({
                type: 'POST',
                url: url,
                data: data,
                dataType: "json",
                success: function (result) {
                    if (result.success) {
                        //刷新表格
                        $("#myModal").modal('hide');  //手动关闭
                        userSearchBtn();
                    } else {
                        //刷新表格
                        $("#myModal").modal('hide');  //手动关闭
                        userSearchBtn();
                    }

                    $("#myModal").bind('hide.bs.modal', function () {
                        $(".modal-backdrop").remove();
                    });
                },
                dataType: "json"
            });
        });

        //证照属性设置新添加信息
        $("#add").on("click", function SaveData() {
            $("#u_id").val("");
            $("#u_fid").val("");
            $("#g_address").val("");
            $("#g_latitude").val("");
            $("#g_longitude").val("");
            $('#myModal').modal('show');
        });


        //证照属性设置删除
        $("#delBtn").on("click", function () {
            var id = $("#del_id").val();
            var data = {"contentId": id};
            var url = "./deleteUserGIS.action?type=1";
            //执行删除
            $.ajax({
                type: 'POST',
                url: url,
                data: data,
                dataType: "json",
                success: function (result) {
                    if (result.success) {

                        userSearchBtn();
                    } else {
                        userSearchBtn();
                    }
                    $('#deleteModal').modal('hide');
                },
                dataType: "json"
            });

        });

        //获得标识
        function getActionId() {
            return new Date().getTime();
        }


    })
    ;

</script>
</body>
</html>
